import { HashRouter, Route, Routes, useNavigate } from "react-router-dom";
import "./App.css";
import { Menu, Spin } from "antd";
import React, { Suspense, useState } from "react";
import { MailOutlined } from "@ant-design/icons";
import { MenuProps } from "antd/lib/menu";

const Home = React.lazy(() => import("./pages/home"));
const Detail = React.lazy(() => import("./pages/detail"));

function Header() {
  return (
    <div className="h-[60px] font-bold shadow-md flex flex-row items-center relative z-10 px-8">
      标题
    </div>
  );
}

function NavMenus() {
  const nav = useNavigate();
  const [items] = useState([
    {
      key: 11,
      label: "导航一",
      icon: <MailOutlined />,
      children: [{ key: 111, label: "导航一一", icon: <MailOutlined /> }],
    },
    {
      key: 12,
      label: "导航二",
      icon: <MailOutlined />,
      children: [{ key: 121, label: "导航一一", icon: <MailOutlined /> }],
    },
    {
      key: 13,
      label: "导航三",
      icon: <MailOutlined />,
      children: [{ key: 131, label: "导航一一", icon: <MailOutlined /> }],
      type: "group",
    },
    { key: "divder-1", type: "divider" },
    { key: 14, label: "导航四", icon: <MailOutlined /> },
    { key: 15, label: "导航五", icon: <MailOutlined /> },
    { key: 16, label: "导航六", icon: <MailOutlined /> },
    { key: 17, label: "导航七", icon: <MailOutlined /> },
    { key: 18, label: "导航八", icon: <MailOutlined /> },
  ]);

  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    nav(`/detail/${e.key}`);
  };

  return (
    <div className="w-[200px] shadow-md">
      <Menu className="w-full" onClick={onClick} mode="inline" items={items} />
    </div>
  );
}

function App() {
  return (
    <HashRouter>
      <div className="w-full h-full flex flex-col">
        <Header />
        <div className="flex-1 w-full flex flex-row">
          <NavMenus />
          <div className="flex-1 h-full">
            <Suspense fallback={<Spin />}>
              <Routes>
                <Route path="/" Component={Home} />
                <Route path="/detail/:id" Component={Detail} />
              </Routes>
            </Suspense>
          </div>
        </div>
      </div>
    </HashRouter>
  );
}

export default App;
